import { Link } from "react-router-dom";
import qrCodeImg from "../assets/qrcode.png";
import codeBg from "../assets/codeBg.png";
import Icon from "../assets/check.svg";
import formBg1 from "../assets/Group.svg";
import icon1 from "../assets/icon.svg";

export default function SubmitSuccess() {
  return (
    <div
      className="w-[100vw] h-[100vh] relative bg-center relative
       text-[#FFFFFF]"
      style={{
        // backgroundImage: `url(${codeBg})`,
        // backgroundSize: '100% 100%',
        // backgroundPosition: 'top',
        // backgroundRepeat: 'no-repeat',
      }}
    >
      <div className="w-[100vw] h-[100vh] fixed top-0 left-0 z-0">
        <img
          src={codeBg}
          alt="隐私政策"
          className="w-[100vw] h-[100vh] object-cover "
          />
      </div>
      <div className="w-[100vw] h-[100vh] absolute top-0 left-0 z-1">
        <div className="h-fit pt-[56px] pl-[34px] pr-[34px] inset-0 bg-black/45 flex items-center justify-center pb-[34px]">
          <div className="w-full max-w-[560px] bg-white rounded-xl p-5 shadow-xl overflow-y-auto">
            <div className="text-gray-800 text-sm md:text-base">
              <div className="text-[18px] mb-[17px] text-[700]">
                UPM胶黏材料医药标签解决方案
              </div>
              <div className="flex items-center gap-[8px] mt-[17px]">
                <img src={Icon} className="w-[20px] h-[20px]" />
                <div className="text-[15px] text-[500]">破解小口径贴标难题— 系统方案深度解析</div>
              </div>
              <div className="flex items-center gap-[8px] mt-[10px]">
                <img src={Icon} className="w-[20px] h-[20px]" />
                <div className="text-[15px] text-[500]">看不见的风险怎么防？杜绝医药污染有方法</div>
              </div>
              <div className="flex items-center gap-[8px] mt-[10px]">
                <img src={Icon} className="w-[20px] h-[20px]" />
                <div className="text-[15px] text-[500]">稳定供应如何保障？从源头到终端全程安心</div>
              </div>
              <div className="flex items-center gap-[8px] mt-[20px]">
                <div className="text-[14px]">11月18日(星期二)20:00直播</div>
              </div>
            </div>
            
            <div className="flex flex-col items-center gap-2 my-3 bg-[#FFFFFF] mt-[36px] rounded-[15.3px] p-[18px]">
              <div className="flex items-center gap-[5px] w-full">
                <div className="py-[9px] px-[13px]">
                  <img
                    src={formBg1}
                    alt="隐私政策"
                    className="w-[34px] h-[auto] object-contain "
                    />
                </div>
                <div>
                  <div className="flex items-center gap-[8px]">
                    <div className="text-[#000000] text-[18px] font-[700]">UPM胶黏材料 </div>
                    <img
                      src={icon1}
                      alt="隐私政策"
                      className="w-[20px] h-[20px] object-contain "
                      />
                  </div>
                  <div className="text-[#919191] text-[14px] font-[400]">医药标签解决方案</div>
                  </div>
                </div>
              <img
                src={qrCodeImg}
                alt="预约二维码"
                className="w-40 h-40 md:w-[220px] md:h-[220px]"
              />
              <div className="text-[#919191] text-[14px] font-[400] text-center">扫描二维码跳转直播</div>
            </div>
          </div>
        
        </div>

      </div>
    </div>
  );
}
